<template>
  <div class="swiper-search">
    <div class="swiper-search-container">
      <div class="swiper-search-left">
        <template v-if="navData.length!=1">
          <span
            v-for="(navItem,index) in navData"
            :key="navItem.text"
            :id="navItem.bkId"
            @click="filterSearch('nav',navItem)"
            :class="{'partActive':partActiveId==navItem.bkId}"
            class="span"
          >
            {{ navItem.text }}<i v-if="index!=(navData.length-1)" />
          </span>
        </template>
        <template v-if="navData.length==1">
          <span class="noLevel">
            无更多分类
          </span>
        </template>
      </div>
      <div class="swiper-search-right">
        <span
          @click="searchMore=!searchMore"
          class="swiper-search-more"
        >
          <i class="fa fa-filter" />高级查询
        </span>
        <p class="search-input">
          <i class="jeicon jeicon-search" />
          <input
            :ref="mhId+'searchText'"
            v-model="inputVal"
            @keyup.enter="filterSearch()"
            type="text"
            placeholder="search..."
          >
          <i
            @click="filterSearch('clear1')"
            v-if="clearInputVal"
            class="jeicon jeicon-error-circle"
          />
          <button
            @click="filterSearch()"
            class="swiper-search-btn"
          >
            查询
          </button>
        </p>
      </div>
    </div>
    <div
      v-show="!searchMore"
      class="swiper-collapse-transition"
    >
      <div>
        <span
          class="swiper-department"
        >
          投稿部门：
          <input
            ref="department"
            v-model="departValue"
            @click="getDepart"
            type="text"
            readonly="true"
            placeholder="请选择"
          >
          <i
            @click="filterSearch('clear2')"
            v-if="clearInputValBm"
            class="jeicon jeicon-error-circle"
          />
        </span>
        时间：<el-dropdown
          @command="handleCommand"
        >
          <span class="el-dropdown-link">
            {{ searchTime.text }}<i class="jeicon jeicon-sort-small-down" />
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="time in timeList"
              :key="time"
              :command="time"
            >
              {{ time.text }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <el-checkbox-group v-model="radio">
        <el-checkbox label="0">
          未读
        </el-checkbox>
        <el-checkbox label="1">
          已读
        </el-checkbox>
      </el-checkbox-group>
    </div>
  </div>
</template>
<script>
import { EventBus } from '../../common/eventBus';
import { COMMON } from '../../common/params';

export default {
  name: 'Search',
  data() {
    return {
      searchMore: true,
      partActiveId: '',
      navData: [],
      postData: {},
      timeList: [
        { text: '全部', code: '' },
        { text: '今日', code: 'thisDay' },
        { text: '本周', code: 'thisWeek' },
        { text: '本月', code: 'thisMonth' },
      ],
      searchData: {},
      searchTime: {
        text: '全部',
        code: '',
      },
      radio: [],
      activeBkId: '',
      inputVal: '',
      mhId: '',
      departValue: '',
      clearInputVal: false,
      clearInputValBm: false,
    };
  },
  watch: {
    radio() {
      this.filterSearch();
    },
    inputVal(nv) {
      if (JE.isEmpty(nv)) {
        this.clearInputVal = false;
      } else {
        this.clearInputVal = true;
      }
    },
  },
  mounted() {
    const that = this;
    EventBus.$on(COMMON.SEARCHTAB, (params) => {
      that.searchData = this.getNavData(params);
      that.activeBkId = params.bkId;
      this.mhId = params.mhId;
    });
  },
  methods: {
    getDepart() {
      JE.selectWin({
        title: '部门',
        configInfo: 'JE_RBAC_DEPARTMENT,,,S',
        type: 'tree',
        callback: (sels) => {
          const dept = sels[0];
          if (dept) {
            this.departValue = dept.get('text');
            this.searchData.SY_CREATEORG = dept.get('id');
            this.clearInputValBm = true;
            this.filterSearch();
          }
        },
      });
    },
    handleCommand(command) {
      this.$set(this, 'searchTime', command);
      this.postData.XW_SPTGSJ = this.searchTime.code = command.code;
      this.filterSearch();
    },
    async getNavData(parmas) {
      this.navData = this.filterData(parmas.ejbk);
      this.navData.unshift({
        text: '全部',
        bkId: '',
        mhId: this.mhId,
      });
      this.partActiveId = this.navData.length ? this.navData[0].bkId : '';
      const parmas1 = {
        JE_MHXW_MH_ID: parmas.mhId,
        SY_PARENT: parmas.bkId,
        JE_MHXW_BK_ID: this.navData.length ? this.navData[0].bkId : '',
        XW_BT: this.$refs[`${this.mhId}searchText`] && this.$refs[`${this.mhId}searchText`].value,
        XW_SPTGSJ: this.searchTime.code || '',
        SY_CREATEORG: this.searchData.SY_CREATEORG || '',
        XW_SFYD: (this.radio.length == 2 || this.radio.length == 0) ? '' : this.radio[0],
        start: 0,
        limit: 20,
      };
      EventBus.$emit(COMMON.SEARCHLIST, parmas1);
      return parmas1;
    },
    filterData(data) {
      if (data && data.length) {
        const newData = [];
        data.map((dataItem) => {
          newData.push({
            text: dataItem.BK_NAME,
            bkId: dataItem.JE_MHXW_BK_ID,
            mhId: dataItem.JE_MHXW_MH_ID,
          });
        });
        return newData;
      }
      return [];
    },
    filterSearch(type, item) {
      if (type == 'clear1') {
        this.searchData.XW_BT = this.inputVal = '';
        this.clearInputVal = false;
      }
      if (type == 'clear2') {
        this.searchData.SY_CREATEORG = this.departValue = '';
        this.clearInputValBm = false;
      }
      if (type == 'nav') {
        this.partActiveId = item.bkId;
      }

      const parmas1 = {
        JE_MHXW_MH_ID: this.mhId,
        SY_PARENT: this.activeBkId,
        JE_MHXW_BK_ID: this.partActiveId,
        XW_BT: this.inputVal,
        XW_SPTGSJ: this.searchTime.code || '',
        SY_CREATEORG: this.searchData.SY_CREATEORG || '', // 部门
        XW_SFYD: this.radio.length == 2 ? '' : this.radio[0],
        start: 0,
        limit: 20,
      };
      this.searchData = parmas1;
      EventBus.$emit(COMMON.SEARCHLIST, this.searchData);
    },
  },
};
</script>
<style >
.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner::after{
  color: #007aff;
  background: #007aff;
}
.el-checkbox__input.is-checked+.el-checkbox__label{
  color: #007aff;
}
</style>
<style scoped rel="stylesheet/scss" lang="scss" >
.swiper-search{
  margin-bottom: 20px;
  font-size: 14px;
  .el-dropdown{
    color: #fff;
    background: #007aff;
    border-radius: 15px;
    cursor: pointer;
    padding: 0 10px;
    height:26px;
    line-height: 26px;
    margin-right:30px;
  }
  .swiper-collapse-transition{
    margin-top:20px;
    display: flex;
    justify-content:space-between;
    .swiper-department{
      position: relative;
      margin-right:35px;
      margin-left: 8px;
      i{
        position: absolute;
        top: 1px;
        color: #999;
        right: 12px;
      }
      input{
        border-radius: 40px;
        border: 1px solid #ddd;
        height: 26px;
        padding-left: 10px;
        width: 196px;
        cursor: pointer;
      }

    }
  }
  .swiper-search-container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    color:#999;
    .swiper-search-left {
      margin-left:8px;
      .noLevel{
        color:#dad9d9;
      }
      i:before{
        content: '/';
        margin:0 5px;
        color: #eee;
      }
      .span{cursor: pointer;}
      .partActive{
        color:#007aff;
      }
    }
    .swiper-search-right{
      display:flex;
      justify-content: center;
      .swiper-search-more{
        margin-right:35px;
        line-height: 26px;
        cursor: pointer;
        .fa-filter{
          margin-right:10px;
        }
      }
    }
  }
  .transition-box {
    margin-bottom: 10px;
    width: 200px;
    height: 100px;
    border-radius: 4px;
    background-color: #409EFF;
    text-align: center;
    color: #fff;
    padding: 40px 20px;
    box-sizing: border-box;
    margin-right: 20px;
  }
  .search-input{
    border-radius: 40px;
    padding: 0 0 0 4px;
    overflow: auto;
    height: 26px;
    display: flex;
    border:1px solid #999;
    position: relative;
    .jeicon-search{
      line-height: 26px;
      margin-right:5px;
    }
    input{
      border:none;
    }
    .jeicon-error-circle{
      position: absolute;
      font-size: 14px;
      top: 5px;
      right: 50px;
      color: #d2d2d2;
      cursor: pointer;
    }
    .swiper-search-btn{
      background: #007aff;
      border:none;
      color: #fff;
      padding:0 10px;
      cursor: pointer;
      font-size:12px;
    }
  }
}
</style>
